<template>
  <div class="right-data">
    <div class="data-search">
      <div class="search-form">
        类型
        <el-select 
          v-model="dataFilter.reportType" 
          @change="onTypeChange"
          style="margin: 0 16px 0 5px; width: 120px;"
        >
          <el-option label="电量报表" :value="1" />
          <el-option label="水量报表" :value="2" />
          <el-option label="气量报表" :value="3" />
        </el-select>
        <el-button @click="onDay" :class="dataFilter.timeType == 1 ? 'active' : ''">
          日
        </el-button>
        <el-button @click="onMonth" :class="dataFilter.timeType == 2 ? 'active' : ''">
          月
        </el-button>
        <el-button @click="onYear" :class="dataFilter.timeType == 3 ? 'active' : ''">
          年
        </el-button>
        <el-button @click="onDo" :class="dataFilter.timeType == 4 ? 'active' : ''" style="margin-right: 16px;">
          自定义
        </el-button>

        <el-date-picker
          v-model="dataFilter.paramTime"
          @change="onDateChange"
          :type="elTimeType[dataFilter.timeType]"
          :value-format="elFormatType[dataFilter.timeType]"
          style="max-width: 260px;"
        />
      </div>
      <div class="search-btn">
        <el-button
          type="primary"
          :loading="loading"
          @click="onSearch"
        >
          查询
        </el-button>
        <el-button 
          type="primary" 
          plain 
          @click="onExport" 
          style="margin-left: 11px;"
        >
          导出
        </el-button>
      </div>
    </div>
    <div class="data-tabs">
      <el-tabs 
        v-if="dataFilter.reportType == 1"
        v-model="tabEle" 
        @tab-click="tabEleClick"
      >
        <el-tab-pane label="正向有功总示值" name="1">
          <ReportOne ref="oneRef" />
        </el-tab-pane>

        <el-tab-pane label="反向有功总示值" name="2">
          <ReportOne ref="twoRef" />
        </el-tab-pane>

        <el-tab-pane label="正向无功总示值" name="3">
          <ReportOne ref="threeRef" />
        </el-tab-pane>

        <el-tab-pane label="反向无功总示值" name="4">
          <ReportOne ref="fourRef" />
        </el-tab-pane>

        <el-tab-pane label="正向最大需量" name="5">
          <ReportOne ref="fiveRef" />
        </el-tab-pane>

        <el-tab-pane label="反向最大需量" name="6">
          <ReportOne ref="sixRef" />
        </el-tab-pane>

        <el-tab-pane label="电能报表" name="7">
          <ReportOne ref="sevenRef" />
        </el-tab-pane>
      </el-tabs>

      <el-tabs 
        v-if="dataFilter.reportType == 2"
        v-model="tabWater" 
        @tab-click="tabWaterClick"
      >
        <el-tab-pane label="冻结示值" name="8">
          <ReportTwo ref="eightRef" />
        </el-tab-pane>

        <el-tab-pane label="水量报表" name="9">
          <ReportTwo ref="nineRef" />
        </el-tab-pane>
      </el-tabs>

      <el-tabs 
        v-if="dataFilter.reportType == 3"
        v-model="tabGas" 
        @tab-click="tabGasClick"
      >
        <el-tab-pane label="冻结示值" name="10">
          <ReportTwo ref="tenRef" />
        </el-tab-pane>

        <el-tab-pane label="气量报表" name="11">
          <ReportTwo ref="elevenRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { isReactive, reactive, ref } from 'vue';
import ReportOne from "./components/ReportOne.vue";
import ReportTwo from "./components/ReportTwo.vue";


const dataFilter = reactive({
  houseIdList: [],
  projectId: null,
  // 报表类型，1-电量报表，2-水量报表，3-气量报表
  reportType: 1,
  // 指定时间，例：2024-09-01，2024-09，2024
  paramTime: '',
  // 时间类型，1-按日，2-按月，3-按年，4-自定义
  timeType: 1,
  startDate: '',
  endDate: '',
})

dataFilter.paramTime = new Date().toISOString().substr(0, 10);

const onTypeChange = () => {
  // 报表类型，1-电量报表，2-水量报表，3-气量报表
  if (dataFilter.reportType == 1) {
    tabWater.value = ''
    tabGas.value = ''
    tabEle.value = '1'
    console.log('tabEle', tabEle.value)
    onSearch()
  } else if (dataFilter.reportType == 2) {
    tabEle.value = ''
    tabGas.value = ''
    tabWater.value = '8'
    console.log('tabWater', tabWater.value)
    onSearch()
  } else {
    tabEle.value = ''
    tabWater.value = ''
    tabGas.value = '10'
    console.log('tabGas', tabGas.value)
    onSearch()
  }
}

const onDateChange = () => {
  onSearch()
}

// 时间组件类型按顺序对应 dataFilter.timeType
const elTimeType = ref([
  'date', 'date', 'month', 'year', 'daterange'
])

const elFormatType = ref([
  'YYYY-MM-DD', 'YYYY-MM-DD', 'YYYY-MM', 'YYYY', 'YYYY-MM-DD'
])

const onDay = () => {
  dataFilter.paramTime = ''
  dataFilter.startDate = ''
  dataFilter.endDate = ''
  dataFilter.timeType = 1
}

const onMonth = () => {
  dataFilter.paramTime = ''
  dataFilter.startDate = ''
  dataFilter.endDate = ''
  dataFilter.timeType = 2
}

const onYear = () => {
  dataFilter.paramTime = ''
  dataFilter.startDate = ''
  dataFilter.endDate = ''
  dataFilter.timeType = 3
}

const onDo = () => {
  dataFilter.startDate = ''
  dataFilter.endDate = ''
  dataFilter.paramTime = ''
  dataFilter.timeType = 4
}

const loading = ref(false)

const oneRef = ref(null)
const twoRef = ref(null)
const threeRef = ref(null)
const fourRef = ref(null)
const fiveRef = ref(null)
const sixRef = ref(null)
const sevenRef = ref(null)
const eightRef = ref(null)
const nineRef = ref(null)
const tenRef = ref(null)
const elevenRef = ref(null)

const onSearch = () => {
  if (isReactive(dataFilter.paramTime)) {
    dataFilter.startDate = dataFilter.paramTime[0]
    dataFilter.endDate = dataFilter.paramTime[1]
  }
  console.log('dataFilter', dataFilter)
  if (dataFilter.projectId) {
    // 水量 和 气量判断优化
    if (tabEle.value == '1') {
      setTimeout(()=>{
        Object.assign(oneRef.value.searchParams, dataFilter)
        // 时间为自定义的数组，则置空
        if (isReactive(dataFilter.paramTime)) oneRef.value.searchParams.paramTime = ''
        oneRef.value.searchParams.varType = 'DFSTWh'
        oneRef.value.getList()
      }, 500)
    } else if (tabEle.value == '2') {
      Object.assign(twoRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) twoRef.value.searchParams.paramTime = ''
      twoRef.value.searchParams.varType = 'DFRTWh'
      twoRef.value.getList()
    } else if (tabEle.value == '3') {
      Object.assign(threeRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) threeRef.value.searchParams.paramTime = ''
      threeRef.value.searchParams.varType = 'DFCTVarhO'
      threeRef.value.getList()
    } else if (tabEle.value == '4') {
      Object.assign(fourRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) fourRef.value.searchParams.paramTime = ''
      fourRef.value.searchParams.varType = 'DFCTVarhT'
      fourRef.value.getList()
    } else if (tabEle.value == '5') {
      Object.assign(fiveRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) fiveRef.value.searchParams.paramTime = ''
      fiveRef.value.searchParams.varType = 'DFSTDmdW'
      fiveRef.value.getList()
    } else if (tabEle.value == '6') {
      Object.assign(sixRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) sixRef.value.searchParams.paramTime = ''
      sixRef.value.searchParams.varType = 'DFRTDmdW'
      sixRef.value.getList()
    } else if (tabEle.value == '7') {
      Object.assign(sevenRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) sevenRef.value.searchParams.paramTime = ''
      sevenRef.value.searchParams.varType = 'elecReport'
      sevenRef.value.getList()
    }
    // TODO 首次加载触发，项目id加载完，dom未加载，与非首次加载优化
    if (tabWater.value == '8') {
      setTimeout(()=>{
        Object.assign(eightRef.value.searchParams, dataFilter)

        if (isReactive(dataFilter.paramTime)) eightRef.value.searchParams.paramTime = ''
        eightRef.value.searchParams.varType = 'waterFreezeValue'
        eightRef.value.getList()
      }, 500)  
    } else if (tabWater.value == '9') {
      Object.assign(nineRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) nineRef.value.searchParams.paramTime = ''
      nineRef.value.searchParams.varType = 'waterReport'
      nineRef.value.getList()
    }
    // TODO 首次加载触发，项目id加载完，dom未加载，与非首次加载优化
    if (tabGas.value == '10') {
      setTimeout(()=>{
        Object.assign(tenRef.value.searchParams, dataFilter)

        if (isReactive(dataFilter.paramTime)) tenRef.value.searchParams.paramTime = ''
        tenRef.value.searchParams.varType = 'gasFreezeValue'
        tenRef.value.getList()
      }, 500)  
    } else if (tabGas.value == '11') {
      Object.assign(elevenRef.value.searchParams, dataFilter)
      if (isReactive(dataFilter.paramTime)) elevenRef.value.searchParams.paramTime = ''
      elevenRef.value.searchParams.varType = 'gasReport'
      elevenRef.value.getList()
    }
  }
}

const onExport = () => {
  if (dataFilter.reportType == 1) {
    if (tabEle.value == '1') {
      oneRef.value.exportParams()
    } else if (tabEle.value == '2') {
      twoRef.value.exportParams()
    } else if (tabEle.value == '3') {
      threeRef.value.exportParams()
    } else if (tabEle.value == '4') {
      fourRef.value.exportParams()
    } else if (tabEle.value == '5') {
      fiveRef.value.exportParams()
    } else if (tabEle.value == '6') {
      sixRef.value.exportParams()
    } else if (tabEle.value == '7') {
      sevenRef.value.exportParams()
    }
  } else if (dataFilter.reportType == 2) {
    if (tabWater.value == '8') {
      eightRef.value.exportParams()
    } else if (tabWater.value == '9') {
      nineRef.value.exportParams()
    }
  } else {
    if (tabGas.value == '10') {
      tenRef.value.exportParams()
    } else {
      elevenRef.value.exportParams()
    }
  }
}

const tabEle = ref('1')
const tabEleClick = (tab: any) => {
  tabEle.value = tab.paneName
  onSearch()
}

const tabWater = ref('')
const tabWaterClick = (tab: any) => {
  tabWater.value = tab.paneName
  onSearch()
}

const tabGas = ref('')
const tabGasClick = (tab: any) => {
  tabGas.value = tab.paneName
  onSearch()
}

defineExpose({ onSearch, dataFilter })
</script>

<style lang="scss" scoped>
.right-data {
  .data-search {
    height: 88px;
    background: #F5F7FA;
    padding: 24px;
    .search-form {
      float: left;
      .active {
        background: #00AA86;
        color: #fff;
      }
    }
    .search-btn {
      float: right;
      .el-button {
        width: 75px;
      }
      .is-plain {
        background: #fff;
        color: #00aa86;
      }
    }
  }
  .data-tabs {
    width: 100%;
    .tab-item {
      width: 99%;
      height: 370px;
    }
    :deep(.el-tabs__header) {
      width: 100%;

      .el-tabs__item.is-active,
      .el-tabs__item:hover {
        color: #03CCA1;
      }

      .el-tabs__active-bar {
        background-color: #03CCA1;
      }
    }
  }
}
@media (max-width: 1560px) {
  .right-data {
    .data-search {
      height: 128px;
      .search-btn {
        float: left;
        margin: 10px 0 0 37px;
      }
    }
  }
}
</style>